<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITEG</title>

<style type="text/css">
body {
    background-image: url({{ STATIC_URL}}fondo_crear.jpg);
    background-color: #333;
    background-repeat: no-repeat;
    font-family: Calibri;
    color: #FFFFFF;
    font-size: 20px;
}
body,td,th {
    font-family: Calibri;
    color: #575757;
    font-size: 20px;
}
input.anchofijo {
    width: 110px;
}
</style>


<script language="JavaScript">
function point_it(event){
    //Obtengo los valores X, Y:
    x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.form2.pos_x.value = x;
    document.form2.pos_y.value = y;
}
</script>

<script language="JavaScript">
function show_info(pais, continente, coordX, coordY){
    document.form2.nombrePais.value = pais;
    document.form2.continente.value = continente;
    document.form2.pos_x.value = coordX;
    document.form2.pos_y.value = coordY;
}
</script>


</head>



<body>

{% if not imagen_elegida %}

<form action="." method="post" ENCTYPE="multipart/form-data" id="form1" name="form1" >
    {% csrf_token %}

    <div style="position:absolute; left: 118px; top: 6px; width: 800px; height: 32px;">
        {{ form.as_table }}
    </div>
    <div style="position:absolute; left: 557px; top: 532px; width: 345px; height: 96px;">
        <input type="button" value="Volver" class="anchofijo" onclick="location.href='/menu'" />
        <input type="submit" value="Cargar imagen" class="anchofijo" >
    </div>

</form>

{% else %}


{% if edit_vecinos %}


<div style="position:absolute; left: 118px; top: 10px; width: 800px; height: 32px;">
    Seleccione los vecinos de {{ paisDB }}
</div>

<form action="{{ pais }}" method="post" id="form2" name="form2">
    {% csrf_token %}

    <div style="position:absolute; left: 109px; top: 43px; width: 800px; height: 470px;">
        <img src="{{ MEDIA_URL }}{{ imagen }}" width="800" height="470"id="pointer_div">
        {% for paisdelmapa in listaPaises %}
        <div style="position:absolute; left: {{ paisdelmapa.coordX }}px; top: {{ paisdelmapa.coordY }}px; width: 22px; height: 22px;">
            <div style="position:absolute; left: -11px; top: -11px; width: 22px; height: 22px;">
                {% ifnotequal paisdelmapa.nombre pais %}

                <!--{% if paisdelmapa in vecinos %}
                <a href="javascript:ask()">
                <image src="{{ STATIC_URL}}boton1.png" name="adyacentes" value="{{ paisdelmapa.id }}"
                    onclick="alert('hola')" checked />
                </a>
                {% else %}
                <a href="javascript:ask()">
                <image src="{{ STATIC_URL}}boton3.png" name="adyacentes" value="{{ paisdelmapa.id }}"
                    onclick="alert('hola')" />
                </a>
                {% endif %}-->

                <input type="checkbox" name="adyacentes" value="{{ paisdelmapa.id }}"
                {% if paisdelmapa in vecinos %} checked {% endif %}/>



                {% else %}
                <image src="{{ STATIC_URL}}boton2.png" value=" "/>

                {% endifnotequal %}
            </div>
        </div>
        {% endfor %}
    </div>


    <div style="position:absolute; left: 557px; top: 532px; width: 345px; height: 96px;">
        <input type="button" value="Cancelar" class="anchofijo" onclick="location.href='/crearmapa/{{ mapa }}'" />
        <input type="submit" name="save_vec" id="save_vec" value="Guardar Vecinos" class="anchofijo" />
    </div>

</form>




{% else %}

<div style="position:absolute; left: 118px; top: 10px; width: 800px; height: 32px;">
    RESERVADO PARA MENSAJES INFORMATIVOS
</div>


<div style="position:absolute; left: 109px; top: 43px; width: 800px; height: 470px;">
    <img src="{{ MEDIA_URL }}{{ imagen }}" width="800" height="470"id=" pointer_div" onclick="point_it(event)" >

    {% for paisdelmapa in listaPaises %}
    <div style="position:absolute; left: {{ paisdelmapa.coordX }}px; top: {{ paisdelmapa.coordY }}px; width: 22px; height: 22px;">
        <div style="position:absolute; left: -11px; top: -11px; width: 22px; height: 22px;">
            <a href="javascript:ask()">
                <image src="{{ STATIC_URL}}boton1.png" value=" " 
                    onmouseover="this.src='{{ STATIC_URL}}boton2.png'"
                    onmouseout="this.src='{{ STATIC_URL}}boton1.png'"
                    onclick="show_info('{{ paisdelmapa.nombre }}', '{{ paisdelmapa.continente }}',
                     '{{ paisdelmapa.coordX }}', '{{ paisdelmapa.coordY }}')" />
            </a>
        </div>
    </div>
    {% endfor %}
</div>


<form action="{{ mapa }}" method="post" id="form2" name="form2">
    {% csrf_token %}

    <div style="position:absolute; left: 557px; top: 532px; width: 345px; height: 96px;">
        <input type="submit" name="add_pais" id="add_pais" value="Añadir País" class="anchofijo"
        {% if cincuentapaises %} disabled="true" {% endif %}/>

        <input type="button" name="del_pais" id="del_pais" value="Borrar País" class="anchofijo"
         onclick="location.href='/borrarpais/{{ mapa }}/' + document.form2.nombrePais.value" />

        <input type="button" value="Volver" class="anchofijo" onclick="location.href='/menu'" />
        <br /><br />

        <input type="button" name="edit_vec" id="edit_vec" value="Editar Vecinos" class="anchofijo"
         onclick="location.href='/editvecinos/{{ mapa }}/' + document.form2.nombrePais.value" />

         <input type="button" name="delete" id="delete" value="Borrar Mapa" class="anchofijo"
        onclick="location.href='/borrarmapa/{{ mapa }}'"/>

        <input type="button" name="save" id="save" value="Guardar Mapa" class="anchofijo"
        onclick="location.href='/savemap/{{ mapa }}'"
        {% if not cincuentapaises %}disabled="true"{% endif %}/>
    </div>

    <div style="position:absolute; left: 108px; top: 507px; width: 433px; height: 140px;">

        <p align="right">
        País
        <input type="text" name="nombrePais" id="nombrePais" size="30" maxlength="30"/><br />
        Continente
        <input type="text" name="continente" id="continente" size="30" maxlength="30"/><br />
        x = <input type="text" name="pos_x" size="3" /> y = <input type="text" name="pos_y" size="3" /><br />
        {{ listaPaises|length }} de 50 países
        </p>

    </div>

</form>

{% endif %}

{% endif %}

</body>
</html>
